<template>
  <BasicModal
    :width="1200"
    v-bind="$attrs"
    :title="getTitle"
    @register="registerModal"
    @ok="handleOk"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { cascaderProvinceCity } from '/@/utils/adcode';
  import { addUser, updateUser } from '/@/api/user/index';
  import { ref, unref, computed } from 'vue';

  // 必须直接放置在 <script setup> 的顶级作用域下。
  const emit = defineEmits(['success']);
  const isUpdate = ref(true);

  const [registerModal, { changeOkLoading, closeModal }] = useModalInner((row: any) => {
    console.log(row);
    if (row.isUpdate === false) {
      resetFields();
      isUpdate.value = row.isUpdate;
    } else {
      isUpdate.value = row.isUpdate;
      setFieldsValue({
        ...row.record,
        id: row.record.id,
        area: [row.record.province, row.record.city], // "130500" "130000"
      });
    }
  });

  const schemas: FormSchema[] = [
    // {
    //   field: 'field1',
    //   component: 'Input',
    //   label: '字段1',
    //   colProps: {
    //     span: 8,
    //   },
    //   componentProps: {
    //     placeholder: '自定义placeholder',
    //     onChange: (e: any) => {
    //       console.log(e);
    //     },
    //   },
    // },
    { label: '基本信息', field: 'basc', component: 'Divider', colProps: { span: 24 } },
    {
      field: 'id',
      label: '编码',
      component: 'Input',
      ifShow: false,
    },
    {
      label: '登录名',
      field: 'username',
      component: 'Input',
      required: true,
    },
    {
      label: '密码',
      field: 'password',
      component: 'InputPassword',
      required: true,
    },
    {
      label: '客户名',
      field: 'customer',
      component: 'Input',
      required: true,
    },
    {
      label: '客户负责人',
      field: 'accountManager',
      component: 'Input',
      required: true,
    },
    {
      label: '联系方式',
      field: 'contact',
      component: 'Input',
      rules: [
        { required: true },
        {
          pattern: /^1[3456789]\d{9}$/,
          message: '输入正确手机号',
        },
      ],
    },
    {
      label: '地区',
      field: 'area',
      component: 'Cascader', // 树形TreeSelect
      required: true,
      componentProps: {
        options: cascaderProvinceCity,
      },
    },
  ];

  // getFieldsValue
  const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
    labelWidth: 150,
    schemas,
    showActionButtonGroup: false,
    baseColProps: { span: 8 }, // 配置所有选子项的 ColProps，不需要逐个配置，子项也可单独配置优先与全局
    layout: 'vertical', // 表单布局	'horizontal'|'vertical'|'inline'
  });

  const getTitle = computed(() => (!unref(isUpdate) ? '添加用户' : '编辑用户'));

  function handleOk() {
    validate().then((res) => {
      // console.log(res);
      // console.log(getFieldsValue());
      // 用于修改确认按钮的 loading 状态
      changeOkLoading(true);
      let api = addUser;
      if (unref(isUpdate)) {
        api = updateUser;
      }
      api(res)
        .then(() => {
          // console.log(result);
          changeOkLoading(false);
          closeModal();
          emit('success', unref(isUpdate));
        })
        .catch(() => {
          changeOkLoading(false);
        });
    });
  }
</script>
